<template>
  <view class="page">
    <view class="dk">
      <!-- 顶框 -->
      <view class="dk_kp">
        <!-- 卡片 -->
        <view class="dk_kp_dw">
          <!-- 定位作用 -->
          <image class="dk_tx" :src="avatar_url"></image>
          <!-- 头像 -->
          <view class="dk_nk">
            <h1 class="dk_yhm">{{ nickname }}</h1>
            <!-- 用户名 -->
            <text class="dk_sj">永不过期</text>
            <!-- 会员时间 -->
          </view>
        </view>
      </view>
    </view>
    <view class="hyzx">会员专享</view>
    <!-- 下框 -->
    <view class="xk">
      <view class="mokuai" @tap="gochongzhi(mkl.url)" v-for="(mkl, index) in mokuai" :key="index">
        <view class="mk_dw">
          <image class="mkl_tp" :src="mkl.tp"></image>
          <text class="mkl_text">{{ mkl.name }}</text>
        </view>
      </view>
    </view>
    <view style="position:absolute;bottom:0;width: 100%">
      <view style="color: #c2c2c2;font-size: 12px;padding: 6px;text-align: center">本系统由集客猫云提供技术支持</view>
    </view>
  </view>
</template>

<script>
// pages/zhuanshu/zhuanshu.js
import {userindex} from "@/common/api";

var app = getApp();
export default {
  data() {
    return {
      mokuai: [
        {
          tp: '/static/pages/img/卡1.jpg',
          name: '储值卡',
          url: '/packageB/chuzhika/chuzhika'
        },
        {
          tp: '/static/pages/img/充值活动.png',
          name: '充值活动',
          url: '/packageA/wodekaquan/wodeyue'
        }
      ],

      mkl: {
        url: '',
        tp: '',
        name: ''
      },
      avatar_url: "",
      nickname: "",
      userinfo: null
    };
  }
  /**
   * 生命周期函数--监听页面加载
   */,
  onLoad(options) {
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {
  },
  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {
    this.loginstatus = app.globalData.loginstatus;
    if (this.loginstatus == 2) {
      userindex(res => {
        this.userinfo = res.data.data.info
        this.nickname = this.userinfo.nickname;
        this.avatar_url = this.userinfo.avatar_url;
      })
    } else {
      this.nickname = "微信用户";
    }
  },
  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {
  },
  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {
  },
  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {
  },
  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {
  },
  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {
  },
  methods: {
    gochongzhi(url) {
      if (app.globalData.loginstatus == 2) {
        uni.navigateTo({
          url: url
        })
      } else {
        uni.navigateTo({
          url: "/packageC/login/login"
        })
      }
    }
  }
};
</script>
<style>
.page {
  width: 100vw; /* 页面宽度占据整个视口宽度 */
  height: 100vh; /* 页面高度占据整个视口高度 */
  overflow: hidden; /* 隐藏内容溢出部分 */
}

.dk {
  width: 100%;
  height: 450rpx;
  background-color: rgb(10, 10, 10); /* 设置输入框背景色为灰色 */
  display: flex; /* 使用Flexbox布局 */
}

.dk_kp {
  display: flex; /* 使用Flexbox布局 */
  margin: 190rpx 4% 0rpx 4%;
  width: 95%;
  height: 260rpx;
  background-color: rgb(221, 177, 140); /* 设置输入框背景色为灰色 */
}

.dk_kp_dw {
  margin: 70rpx 0 0 30rpx;
  display: flex; /* 使用Flexbox布局 */
}

.dk_tx {
  width: 130rpx;
  height: 130rpx;
  border-radius: 50%;
  background-color: rgb(224, 215, 208);
}

.dk_nk {
  margin: 20rpx 0 0 20rpx;
  color: rgb(151, 82, 17, 0.904);
}

.dk_yhm {
  font-size: 20px; /* 将字体大小设为14px */
  display: block; /* 取消Flexbox布局，恢复默认的块级元素布局 */
}

.dk_sj {
  margin-top: 20rpx;
  font-size: 14px; /* 将字体大小设为14px */
  display: block; /* 取消Flexbox布局，恢复默认的块级元素布局 */
}

.hyzx {
  width: 100%;
  margin: 50rpx 0 0 30rpx;
  font-size: 25px; /* 将字体大小设为14px */
  font-weight: bold; /* 设置字体加粗 */
  color: rgb(53, 52, 52);
}

.xk {
  margin-top: 30rpx;
  display: flex; /* 使用Flexbox布局 */
  flex-wrap: wrap; /* 允许元素在超出容器时换行 */
}

.mokuai {
  margin: 3% 0 0 3%;
  width: 44%;
  height: 200rpx;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
  background-color: white;
  border-radius: 5px; /* 圆角设置为20px */
  display: flex; /* 使用Flexbox布局 */
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
}

.mk_dw {
  width: 80%;
  height: 50%;
  display: flex; /* 使用Flexbox布局 */
  justify-content: flex-start; /* 主轴上靠左对齐 */
  align-items: center; /* 垂直居中 */
}

.mkl_tp {
  margin-left: 30rpx;
  width: 50rpx;
  height: 50rpx;
}

.mkl_text {
  margin-left: 20rpx;
}
</style>
